<template>
  <div>
    <el-card style="margin: 10px 5px; height: 80vh;">
      <div style="align-items: center; text-align: left; font-weight: bolder; font-size: large;">相册列表</div>
      <div style="align-items: center; display: flex; margin-top: 10px;">
        <img :src=album.image alt="qwq" style="width: 100px; height: 100px;">
        <div style=" width: 950px; height: 100px; ">
          <span style="font-size: 16px; font-weight:600; display: block; margin: 0 0 10px 5px;">
            相册名：{{ album.albumName }}</span>
          <span style="display: block; margin: 15px 5px;">{{ total }}张</span>
          <el-button type="primary" icon="el-icon-picture-outline" style="margin: 0 0 0 5px;"
            @click="handleAdd">上传照片</el-button>
        </div>
        <div style="margin-left: auto;">
          <span style="margin-right: 20px;">
            <input type="checkbox" v-model="checkedAll" @change="changeAllChecked()" />全选
          </span>
          <el-button type="danger" icon="el-icon-delete" size="medium" @click="delBatch">批量删除</el-button>
        </div>

      </div>
        
      <div v-for="(photo, index) in photos" :key="index" class="image-container">
        <el-image style="height: 120px; margin: 0 10px; " :src="photo.image" :fit="fit" :preview-src-list="[photo.image]"
          ></el-image>
        <span class="icon-and-number">
          <input type="checkbox" :value=photo.id v-model="checkedItem" />
        </span>
        <span class="number"><el-popconfirm title="确定删除相册吗?" @confirm="handleDelete(photo.id)">
            <i class="el-icon-more icon" slot="reference" style="cursor: pointer;"></i>
          </el-popconfirm></span>
      </div>
    </el-card>
    <el-dialog title="相册信息" :visible.sync="dialogVisible" width="35% " top="10vh">
      <el-form :model="form" label-width="80px" style="padding-right: 20px;">
        <el-form-Item label="上传相片" prop="image">
          <el-upload class="upload-demo" :action="$baseUrl+'/upload'" :headers="{token:user.token}"
            :show-file-list="false" drag :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="image" :src="image" class="avatar">
            <div v-else> <i class="el-icon-upload" :class="icon"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-Item>
        <el-form-item label="相片名">
          <el-input v-model="form.name" placeholder="请输入相片名"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default{
    data(){
        return{
            album:JSON.parse(this.$route.query.mAlbum),
            total:'1',
            photos:[],
            checkedItem: [],
            checkedAll:false,
            dialogVisible:false,
            user:JSON.parse(localStorage.getItem('user'||'{}')),
            form:{},
            image:''
        }
    },
    created(){
    this.load()
   },

    watch: {
    // 监听复选框项是否全部选中
    checkedItem() {
      // 判断选中选项复选框的值数组的长度是否与设定的长度相等，如果相等则所有的选项复选框被选中，否则没有被选中。
      if (this.checkedItem.length == this.photos.length) {
        // 如果所有复选框项全部被选中,则全选复选框也被勾选
        this.checkedAll = true;
      } else {
        // 否则复选框不勾选
        this.checkedAll = false;
      }
    },
  },
    methods:{
        delBatch(){
      if(!this.checkedItem.length){
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确认删除吗','确认',{type:"warning"}).then(response=>{
        this.$request.delete('/photo/delete',{data:this.checkedItem}).then(res=>{
          console.log(response)
          if(res.code=='1'){
            this.$message.success('操作成功')
            this.load(1)
          }else{
            this.$message.error(res.msg)
          }
        })
   
      }).catch(()=>{})
    },
        handleAdd() {
                this.form = {}
                this.dialogVisible = true
            },
        load(){
            this.$request.get('/photo/list',{params: {
            albumName: this.album.albumName
          }}).then(res=>{
            this.photos=res.data
        })
        this.$request.get('/photo/total',{params: {
            albumName: this.album.albumName
          }}).then(res=>{
            this.total=res.data
        })
        },
        handleDelete(index) {
                console.log(index)
                this.$request.delete('/photo/delete/' + index).then(res => {
                    if (res.code == '1') {
                        this.$message.success('操作成功')
                        this.load()
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            save() {
                this.form.image=this.image
                        this.form.albumName=this.album.albumName
                        this.$request({
                            url:'/photo/add',
                            method: 'POST',
                            data: this.form,
                        }).then(res => {
                            if (res.code == '1') {
                                this.$message.success('保存成功')
                                this.dialogVisible = false
                                this.load()
                            }
                            else {
                                this.$message.error(res.msg)
                            }
                        })
                    },
            
         
         changeAllChecked() {
      // 判断全选复选框是否选中
      if (this.checkedAll) {
        // 如果全选复选框被选中,则重新给选项复选框赋值,即选中所有的选项复选框
        this.checkedItem =this.ids=this.photos.map(v=>v.id)
      } else {
        // 如果全选复未选框被选中,则设置为空值,即未选中所有的选项复选框
        this.checkedItem = [];
      }
    },
    handleAvatarSuccess(response,file,fileList) {
            console.log("1");
            console.log(response,file,fileList);
            this.image=response.data;
         },
    }
}
</script>

<style>
.el-upload-dragger img{
    max-width: 100%;
    max-height: 100%;
    }
    
    .image-container {
  position: relative;
  display: inline-block; 
  max-height: 100%;
  margin-top: 10px;
}

.icon-and-number {
  position: absolute; /* 绝对定位 */
  top: 0; /* 定位到图片的顶部 */
  left: 0; /* 定位到图片的左边，你可以根据需要调整 */
   /* 半透明的背景 */
  padding: 5px; /* 内边距 */ 
}

.icon {
    
  width: 20px; /* 图标宽度 */
  height: 20px; /* 图标高度 */
  vertical-align: middle; /* 垂直居中对齐 */
  background-color: rgba(255, 255, 255, 0.7);
}

.number {
 position: absolute;
 bottom: 0;
 right: 0;
 color:black;
}

</style>